<template>
  <div class="app-container">
    <el-form ref="workerForm" :model="workerForm" :rules="formRules" label-width="120px">
      <el-form-item label="姓名" :required="true" prop="name">
        <el-input v-model="workerForm.name" placeholder="工人姓名" />
      </el-form-item>
      <el-form-item label="手机号" :required="true" prop="mobile">
        <el-input v-model="workerForm.mobile" placeholder="手机号" />
      </el-form-item>
      <el-form-item label="性别" :required="true" prop="gender">
        <el-select v-model="workerForm.gender" placeholder="性别">
          <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="workerForm.age" placeholder="年龄（选填）" />
      </el-form-item>
      <el-form-item label="学历">
        <el-select v-model="workerForm.education" placeholder="学历（选填）">
          <el-option v-for="item in eduOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="idcardNo">
        <el-input v-model="workerForm.idcardNo" placeholder="身份证号码（选填）" />
        <div slot="label">
          <span style="margin-right: 3px">身份证号码</span>
          <el-popover
            placement="bottom-right"
            width="200"
            trigger="hover"
            content="可不填，填写后，签署劳动合同时将对身份证号码做校验"
          >
            <i class="el-icon-warning-outline" slot="reference"></i
          ></el-popover>
        </div>
      </el-form-item>
      <el-form-item label="户籍" prop="birthPlace">
        <el-input v-model="workerForm.birthPlace" placeholder="户籍（选填）" />
      </el-form-item>
      <el-form-item label="现住址">
        <el-input v-model="workerForm.address" placeholder="现住址（选填）" />
      </el-form-item>
    </el-form>
    <div class="form-footer">
      <el-button :loading="submitLoading" type="primary" class="btn" @click.native.prevent="onSubmit">提交</el-button>
      <el-button type="secondary" class="btn" @click.native.prevent="onCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { GENDER, EDUCATION, FORM_RULES } from '@common/consts/worker';
import { add, update } from '@common/api/worker';
import { pick } from 'lodash';

export default {
  props: {
    defaultFormData: {
      type: Object,
      default() {
        return {};
      },
    },
    loading: {
      type: Boolean,
      default() {
        return false;
      },
    },
    formType: {
      type: String,
      default() {
        return '';
      },
    },
  },
  data() {
    return {
      eduOptions: EDUCATION,
      genderOptions: GENDER,
      formRules: FORM_RULES,
      workerForm: {
        name: '',
        idcardNo: '',
        mobile: '',
        age: '',
        gender: '',
        birthPlace: '',
        address: '',
        education: '',
      },
      submitLoading: false,
    };
  },
  watch: {
    defaultFormData: {
      immediate: true,
      handler() {
        this.workerForm = pick(this.defaultFormData, [...Object.keys(this.workerForm), 'id']);
        this.$refs.workerForm?.resetFields(this.defaultFormData);
      },
    },
  },
  methods: {
    async onSubmit() {
      this.$refs.workerForm.validate(async valid => {
        if (valid) {
          const msgPrefix = this.formType === 'EDIT' ? '修改' : '添加';
          const formParam = this.workerForm;
          let res = {};
          this.submitLoading = true;
          try {
            if (this.formType === 'EDIT') {
              res = await update(formParam);
            } else {
              res = await add(formParam);
            }
            if (res?.data?.Id) {
              // 成功
              this.$emit('form-submit', { ...this.workerForm, id: res.data.Id });
            } else {
              this.$message({
                message: `${msgPrefix}员工失败`,
                type: 'error',
                duration: 5 * 1000,
              });
            }
            this.submitLoading = false;
          } catch (error) {
            this.submitLoading = false;
          }
        }
      });
    },
    onCancel() {
      this.$refs.workerForm.resetFields();
      this.$emit('form-hide');
    },
  },
};
</script>

<style scoped>
.form-footer {
  margin: 0 auto;
  text-align: center;
}
.line {
  text-align: center;
}
</style>

